<template>
  <a-popover
    v-model="guideStepShowPopover"
    placement="right"
    :overlay-class-name="'popover-guide-step'"
    :destroy-tooltip-on-hide="true"
    :auto-adjust-overflow="true"
    :arrow-point-at-center="true"
    :get-popup-container="getPopupContainer"
    :trigger="''"
  >
    <!--  trigger = '' 避免 ant design vue 警告  -->
    <template #content>
      <div class="step-title">
        <span class="step-title-text">{{ guidePopoverTitle }}</span>
        <a-tooltip :mouse-enter-delay="1">
          <template #title>
            关闭后不再提示
          </template>
          <span class="close-guide-icon" @click="ignoreGuide">
            <a-icon-font type="iconicon-beifen1-copy" />
          </span>
        </a-tooltip>
      </div>
      <div class="step-text">{{ guidePopoverIntroduced }}</div>
    </template>
    <slot name="header"></slot>
  </a-popover>
</template>
<script lang="ts">
/**
 * 二次封装 ant design vue popover 在使用到引导步骤的 button 位置使用
 */
import { Component, Prop, Vue } from 'vue-property-decorator'
import UserGuideStore from '@/store/modules/user-guide'
import UserStore from '@/store/modules/user'
import userGuideTextMap from '@/components/user-guide/user-guide'

@Component
export default class GuideStepPopover extends Vue {
  @Prop({ type: Number, default: 0 }) guideStep!: number // 当前步骤
  // title
  public get guidePopoverTitle() {
    return userGuideTextMap[this.guideStep].title
  }
  // 简介
  public get guidePopoverIntroduced() {
    return userGuideTextMap[this.guideStep].introduced
  }

  public get guideStepShowPopover() {
    return (
      UserGuideStore.currentGuideStepPopover &&
      this.guideStep === UserGuideStore.currentStep && // 等于当前步骤
      UserGuideStore.newUserGuideMode && // 处于新用户引导模式
      !UserGuideStore.currentGuideStepInProgress
    )
  }
  /**
   * 关闭引导
   */
  public ignoreGuide() {
    if (UserStore.currentUser?.id) {
      UserGuideStore.ignoreUserGuide(UserStore.currentUser?.id)
    }
  }

  public getPopupContainer(trigger: any) {
    // step 4 涉及到滚动
    if (this.guideStep === 4) {
      return trigger.parentElement
    }
    return document.body
  }
}
</script>

<style lang="less">
// 用户引导 step popover
.popover-guide-step {
  width: 248px !important;

  .ant-popover-content {
    width: 238px;

    .ant-popover-arrow {
      border-bottom-color: #6973ff;
      border-left-color: #6973ff;
      border-right-color: transparent;
      border-top-color: transparent;
      border-width: 8px;
      height: 16px;
      left: 4px;
      width: 16px;
    }

    .ant-popover-inner {
      .ant-popover-inner-content {
        background: #6973ff;
        border-bottom-color: #6973ff;
        border-left-color: #6973ff;
        box-shadow: 0 2px 4px 0;
        box-sizing: content-box;
        color: #fff;
        padding: 20px;
        width: 245px;

        .step-title {
          display: flex;
          justify-content: space-between;
          margin-bottom: 8px;

          .step-title-text {
            color: #fff;
            font-size: 14px;
            font-weight: 600;
            letter-spacing: 1px;
          }

          .close-guide-icon {
            cursor: pointer;
          }
        }

        .step-text {
          color: #fff;
          font-size: 14px;
          font-weight: 400;
          letter-spacing: 1px;
        }
      }
    }
  }
}
</style>
